import { Image } from 'tdesign-react'
import { FormatNumber } from '@/utils/common'
import moment from 'moment'

import styles from './index.module.less'
import StatItem from '@/apps/bilibili/components/StatItem'
import SafeRenderHtml from '@/components/SafeRenderHtml'

const VideoItem = (props: any) => {

  const { videoItem, direction, className, onAuthorClick, onVideoClick } = props

  const getPubTime = () => {
    if (videoItem.pubdate || videoItem.created) {
      return moment((videoItem.pubdate || videoItem.created) * 1000).format('YYYY-MM-DD')
    } else {
      switch (videoItem.type) {
        case 'live_room':
          return 'live'
        default:
          return 'not video'
      }
    }
  }

  return <div className={`${styles.videoItem} ${styles[direction]} ${className}`}>

    <div className={styles.imageBlock}>
      <Image className={styles.image} src={videoItem.pic} shape="round"
        position="center" fit={'cover'}
        onClick={() => { onVideoClick(videoItem) }}></Image>
      <div className={styles.bottom}>
        <div className={styles.playNum}>
          {FormatNumber(videoItem.stat?.view) && <StatItem hasIcon frontValue={'play-rectangle'} backValue={FormatNumber(videoItem.stat?.view)} fontSize={'12px'}/>}
        </div>
        <div className={styles.playNum}>
          {FormatNumber(videoItem.stat?.reply) && <StatItem hasIcon frontValue={'article'} backValue={FormatNumber(videoItem.stat?.reply)} fontSize={'12px'}/>}
        </div>
      </div>
    </div>

    <div className={styles.detail}>
      <div className={styles.videoTitle} onClick={() => { onVideoClick(videoItem) }}>
        <SafeRenderHtml htmlContent={videoItem.title} />
      </div>
      {
        direction == 'vertical' ?
          <div className={styles.videoAuthor} onClick={() => { onAuthorClick(videoItem) }}>{videoItem.owner?.name || videoItem.author} · {getPubTime()}</div> :
          <div className={styles.videoAuthor} onClick={() => { onAuthorClick(videoItem) }}>{videoItem.owner?.name || videoItem.author}</div>
      }
    </div>
  </div>
}

export default VideoItem
